<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>{{name}}</h1>
        <ul>
          <li v-for='i in ary' ref='qqq'>{{i}}</li>
        </ul>
    </div>
</body>
</html>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    //  可以 通过 ref  获取元素 或者 组件
    // ref 若是v-for循环出来的 可以获取一个数组； 若是写死的静态结构 则只能获取最后一个
    // Vue 中的DOM 更新是一个异步操作
    let vm = new Vue({
        el:'#app',
        data:{
            name:"珠峰",
            ary:[100,200,300]
        },
        mounted() {
          // console.log(this.$refs.qqq.length)
          this.ary.push(400)
          // DOM的更新是一个异步操作， 优点在于 可以提升渲染的效率
          console.log(this.$refs.qqq.length)
          this.$nextTick(()=>{
            // 会等待 DOM更新完成之后 在去触发回调函数
            console.log('qqq',this.$refs.qqq.length)
          })
          this.ary.pop()
          this.$nextTick(()=>{
            // 会等待 DOM更新完成之后 在去触发回调函数
            console.log('www',this.$refs.qqq.length)
          })
        },
        // updated() {
        //   console.log(this.$refs.qqq.length)
        // },
    });
</script>
<!-- 
  nextTick:
    
    nextTick执行传递了一个 回调函数；nextTick源码把传进来的函数 放到了一个 callbacks数组中的，
    这个数据其实就是一个事件池，源码中的添加完成之后， 根据pending这个变量，执行了timerfunc
    并且把 pending变成了  true；这样 在多次同步使用 nextTick时 就不会再去执行 timerfunc,
    timerfunc是一个函数 函数里 做了一个异步操作（就是让flushCallbacks异步执行），
    为啥异步执行是为了能侯在多次同步执行nextTick时 ，先把回调函数放到事件池中；
    等同步执行完成之后， 在去执行异步的flushCallbacks， flushCallbacks 这个函数就是把
    事件池中的所有回调函数挨个执行了

 -->